import { createBrowserRouter, Navigate } from "react-router-dom";
import SandBox from "../pages/SandBox";
import Dashboard from "../pages/dashboard";

import Common from "../pages/common";
import ButtonView from "../pages/common/Button";
import FloatButtonView from "../pages/common/FloatButton";
import IconView from "../pages/common/Icon";
import TypographyView from "../pages/common/Typography";

import LayoutMain from "../pages/layout";
import DeviderView from "../pages/layout/Devider";
import FlexView from "../pages/layout/Flex";
import GridView from "../pages/layout/Grid";
import LayoutView from "../pages/layout/Layout";
import SpaceView from "../pages/layout/Space";
import SplitterView from "../pages/layout/Splitter";

import NavigateMain from "../pages/navigate";
import BreadcrumbView from "../pages/navigate/breadcrumb";
import DropDownView from "../pages/navigate/dropdown";
import MenuView from "../pages/navigate/menu";
import PaginationView from "../pages/navigate/pagination";
import StepView from "../pages/navigate/step";

import DataEnter from "../pages/data-entry";
import AutoCompleteView from "../pages/data-entry/AutoComplete";
import CascaderView from "../pages/data-entry/Cascader";
import CheckboxView from "../pages/data-entry/Checkbox";
import DatePickerView from "../pages/data-entry/DatePicker";
import FormView from "../pages/data-entry/Form";
import InputView from "../pages/data-entry/Input";
import RadioView from "../pages/data-entry/Radio";
import SelectView from "../pages/data-entry/Select";
import SliderView from "../pages/data-entry/Slider";
import SwitchView from "../pages/data-entry/Switch";
import TimePickerView from "../pages/data-entry/TimePicker";
import TreeSelectView from "../pages/data-entry/TreeSelect";
import UploadView from "../pages/data-entry/Upload";

import DataDisplay from "../pages/data-display";
import AvatarView from "../pages/data-display/Avatar";
import BadgeView from "../pages/data-display/Badge";
import CalendarView from "../pages/data-display/Calendar";
import CardView from "../pages/data-display/Card";

const router = createBrowserRouter([
    {
        path: "/",
        element: <SandBox />,
        children: [
            {
                path: "/",
                element: <Navigate to='/dashboard' />,
            },
            {
                path: "/dashboard",
                element: <Dashboard />,
            },
            {
                path: "/common",
                element: <Common />,
                children: [
                    {
                        path: "",
                        element: <Navigate to='button' />,
                    },
                    {
                        path: "button",
                        element: <ButtonView />,
                    },
                    {
                        path: "float-button",
                        element: <FloatButtonView />,
                    },
                    {
                        path: "icon",
                        element: <IconView />,
                    },
                    {
                        path: "typography",
                        element: <TypographyView />,
                    },
                ],
            },
            {
                path: "/layout",
                element: <LayoutMain />,
                children: [
                    {
                        path: "",
                        element: <Navigate to='devider' />,
                    },
                    {
                        path: "devider",
                        element: <DeviderView />,
                    },
                    {
                        path: "flex",
                        element: <FlexView />,
                    },
                    {
                        path: "grid",
                        element: <GridView />,
                    },
                    {
                        path: "layout",
                        element: <LayoutView />,
                    },
                    {
                        path: "space",
                        element: <SpaceView />,
                    },
                    {
                        path: "splitter",
                        element: <SplitterView />,
                    },
                ],
            },
            {
                path: "/navigate",
                element: <NavigateMain />,
                children: [
                    {
                        path: "",
                        element: <Navigate to='breadcrumb' />,
                    },
                    {
                        path: "breadcrumb",
                        element: <BreadcrumbView />,
                    },
                    {
                        path: "dropdown",
                        element: <DropDownView />,
                    },
                    {
                        path: "menu",
                        element: <MenuView />,
                    },
                    {
                        path: "pagination",
                        element: <PaginationView />,
                    },
                    {
                        path: "step",
                        element: <StepView />,
                    },
                ],
            },
            {
                path: "/data-entry",
                element: <DataEnter />,
                children: [
                    {
                        path: "",
                        element: <Navigate to='auto-complete' />,
                    },
                    {
                        path: "auto-complete",
                        element: <AutoCompleteView />,
                    },
                    {
                        path: "cascader",
                        element: <CascaderView />,
                    },
                    {
                        path: "checkbox",
                        element: <CheckboxView />,
                    },
                    {
                        path: "date-picker",
                        element: <DatePickerView />,
                    },
                    {
                        path: "form",
                        element: <FormView />,
                    },
                    {
                        path: "input",
                        element: <InputView />,
                    },
                    {
                        path: "radio",
                        element: <RadioView />,
                    },
                    {
                        path: "select",
                        element: <SelectView />,
                    },
                    {
                        path: "slider",
                        element: <SliderView />,
                    },
                    {
                        path: "switch",
                        element: <SwitchView />,
                    },
                    {
                        path: "time-picker",
                        element: <TimePickerView />,
                    },
                    {
                        path: "tree-select",
                        element: <TreeSelectView />,
                    },
                    {
                        path: "upload",
                        element: <UploadView />,
                    },
                ],
            },
            {
                path: "/data-display",
                element: <DataDisplay />,
                children: [
                    {
                        path: "",
                        element: <Navigate to='avatar' />,
                    },
                    {
                        path: "avatar",
                        element: <AvatarView />,
                    },
                    {
                        path: "badge",
                        element: <BadgeView />,
                    },
                    {
                        path: "calendar",
                        element: <CalendarView />,
                    },
                    {
                        path: "card",
                        element: <CardView />,
                    },
                ],
            },
            {
                path: "/feedback",
                element: <div>反馈</div>,
            },
            {
                path: "/other",
                element: <div>其他</div>,
            },
        ],
    },
]);

export default router;
